<template>
<div>

	<el-collapse v-model="activeName" accordion>
	  <el-collapse-item
	  	v-for="(item, index) in columnList"
	    :title="item.column_name" :name="index">

			<el-form 
				:model="item" 
				label-width="180px"
				>
				<el-form-item label="栏目名：" >
					<el-input v-model="item.column_name" placeholder="请输入栏目名称" 
					style="width:300px;"></el-input>
				</el-form-item>

				<el-form-item label="栏目样式：" >
					<el-select v-model="item.mui" placeholder="请选择">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>
				

				<el-form-item label="是否启用：">
				    <el-switch v-model="item.state" 
				    active-value="1" inactive-value="0"></el-switch>
				</el-form-item>

				<el-form-item label="排序：" >
					<el-input v-model="item.asort" placeholder="请输入栏目名称" 
					style="width:300px;"></el-input>
				</el-form-item>

				<el-form-item class="mt10">
				     <el-button type="primary" 
				     @click="onSubmit(item)">
				     保存</el-button>
				     <el-button type="danger" 
		    		 @click="delColumn(item, index)">
		    		 删除</el-button>
				</el-form-item>

			</el-form>	

	  </el-collapse-item>
	</el-collapse>

<el-button type="primary" class="mt20" @click="createColumn()">添加一个栏目</el-button>

</div>		
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	name: 'config_column',
		data () {
		return {
		  	activeName : -1,

		  	options : [
                {'label' : '样式一', 'value' : '1'},
                {'label' : '样式二', 'value' : '2'},
                {'label' : '样式三', 'value' : '3'},
                {'label' : '样式四', 'value' : '4'},
                {'label' : '样式五', 'value' : '5'},
            ],
		}
	},

	props: {

	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'columnList',
		]),
	},

	methods : {
		onSubmit (item) {
			let para = {
				'id' : item.id,
				'column_name' : item.column_name,
				'mui' :item.mui,
				'state' : item.state,
				'asort' : item.asort,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '操作成功',
			          type: 'success'
			        });

			        this.$store.dispatch('getColumnList');
				},
				err : res => {
					this.$notify({
			          title: '操作失败',
			          message: res,
			          type: 'error'
			        });
				}
			};
			this.$store.dispatch('updateColumn', para);
		},

		createColumn () {
			var obj = {
				column_name : '',
				mui : '1',
				state : '1',
				asort : 0,
			};

			this.columnList.push(obj);
			this.activeName = this.columnList.length - 1;
		},

		delColumn (item, index) {
			this.$confirm('此操作将永久删除该栏目, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	          	this.$store.dispatch('updateColumn', {
	          		id : item.id,
	          		del_flg : '1',
	          		cb : () => {
	          			this.columnList.splice(index, 1);
	          		}
	          	});
	        }).catch(() => {
	        });
		}
	},

	watch : {
	    
	},

	mounted () {
		
		this.$store.dispatch('getColumnList');
		
	},

}
</script>

<style scoped>

</style>
